<!DOCTYPE html>
<html>

<head>
    <title>Example</title>
    <meta name="author" content="Adam Freeman" />
    <meta name="description" content="A simple example" />
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
    <style>
       table{
           /* 合并单元格边框 */
           border-collapse: collapse;
           /* 独立边框 */
           /* border-collapse: separate;
           border-spacing: 10px; */
           /* 处理空单元格 */
           /* empty-cells: hide; */
           /* 标题位置 */
           caption-side: bottom;
           /* 指定表格布局 */
           table-layout: fixed;
           width: 100%;
       }
       th,td{
           padding: 5px;
       }
    </style>
</head>

<body>
    <table border="1">
        <caption>Results of the 2011 Fruit Survey</caption>
        <colgroup id="colgroup1">
            <col id="col1And2" span="2">
            <col id="col3">
        </colgroup>
        <colgroup id="colgroup2" span="2"></colgroup>
        <thead>
            <tr>
                <th>Rank</th>
                <th>Name</th>
                <th>Color</th>
                <th colspan="2">Size & Votes</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>Favorite:</th>
                <td>Apples</td>
                <td>Green</td>
                <td>Medium</td>
                <td>500</td>
            </tr>
            <tr>
                <th>2nd Favorite:</th>
                <td>Oranges</td>
                <td>Orange</td>
                <td>Large</td>
                <td>450</td>
            </tr>
            
        </tbody>
        <tfoot>
            <tr>
                <th colspan="5"> & copy; 2011 Adam Freeman Fruit Data Enterprises</th>
            </tr>
        </tfoot>
    </table>
</body>

</html>